<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view class="u-form-box u-m-30 u-p-b-10">
			<view v-for="item in advertList" :key="item.id">
				<u-form :model="form" label-width="300" ref="uForm" v-if="[0,2,4,5,6,7].includes(item.id)">
					<u-form-item required :label="item.title">
						<view class="u-flex u-row-right" @click="onChoose(item.id)">
							<view class="u-text-line-15" :class="item.label ? '' : 'u-color-gray'">
								{{ item.label || '请选择 >' }}
							</view>
						</view>
					</u-form-item>
				</u-form>
				<view v-else-if="[1].includes(item.id)">
					<u-field class="u-width-100" :border-bottom="false" v-model="item.label" label="跳转小程序链接"
						placeholder="请填写" :placeholder-style="placeholderStyle" :required="true" input-align="right"
						label-width="280" :clearable="false" />
					<view @click="advRemindShow = true" class="u-flex font396">
						<u-icon class="quesIcon" name="question-circle" size="26" color="#396CF5FF"></u-icon>
						<view class="u-font-24 u-p-l-10">点击查看如何获取小程序链接</view>
					</view>
				</view>
				<view class="u-flex-col u-col-bottom" v-else-if="[3].includes(item.id)">
					<u-field class="u-width-100" :disabled="true" :placeholder-style="placeholderStyle" label-width="200"
						:border-bottom="false" input-align="right" label="上传宣传图" placeholder="750*280,大小不超过200k"
						required />
					<view class="upload_box" @click="onUploadImage()">
						<image class="image_box" :src="item.value" mode="aspectFit" v-if="item.value"></image>
						<u-icon name="plus" size="48" color="#999" v-else></u-icon>
					</view>
				</view>
				<view v-else-if="[8].includes(item.id)">
					<u-form :model="form" label-width="300" ref="uForm">
						<u-form-item required :label="item.title">
							<u-input placeholder="请填写,不超过20个字" v-model="item.label" input-align="right" :placeholder-style="'color: #808080'"></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view v-else-if="[9].includes(item.id)">
					<u-form :model="form" label-width="300" ref="uForm">
						<u-form-item required :label="item.title">
							<view class="u-text-right" :class="item.value ? '' : 'u-font-999'" @click="onOpenProject">{{item.value ? item.label : '请选择项目 >'}}</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<u-field :disabled="true" :placeholder-style="placeholderStyle" label-width="300" :border-bottom="false"
				input-align="right" label="投放积分" required />
			<view class="u-flex u-flex-wrap">
				<view class="u-m-r-28 u-m-b-20" v-for="item in pointData.list" :key="item.value">
					<u-tag :text="item.value" @click="onChoosePoint(item)" type="warning" :mode="item.check ? 'dark' : 'plain'" />
				</view>
			</view>
			<view class="u-text-line-15 u-p-b-20" v-if="remindInfo">
				<text class="tag_yellow u-p-l-16 u-p-r-16 u-m-r-16 u-p-t-4 u-p-b-4 u-font-24">扣费标准</text>
				<text class="u-font-24">{{ remindInfo }}</text>
			</view>
		</view>

		<!-- 单选 -->
		<view v-if="selectData.show">
			<u-select v-model="selectData.show" :list="selectData.list" @confirm="onSelectConfirm"></u-select>
		</view>
		
		<DateTimePicker ref="datetimePicker" mode="date" :minDate="defaultTime" @confirm="onTimeConfirm"></DateTimePicker>
		
		<!-- 微信小程序码引导 -->
		<u-popup mode="center" v-model="advRemindShow">
			<view class="u-flex u-flex-col u-row-center">
				<view class="u-back-white u-radius-10">
					<u-image width="534rpx" height="50vh" border-radius="20rpx"
						src="https://lrcj.oss-cn-shenzhen.aliyuncs.com/images/common/20241023159714467044.png"></u-image>
				</view>
				<view class="u-m-t-40">
					<u-icon @click="advRemindShow = false" size="50" class="u-p-r-8" color="#fff" name="guanbi"
						custom-prefix="custom-icon" />
				</view>
			</view>
		</u-popup>
		
		<!-- 项目选择 -->
		<u-mask mode="center" mask-click-able="false" :show="projectData.show">
			<view class="signUpMask">
				<view class="u-back-white u-p-20 u-radius-20" style="width: 80%; max-height: 900rpx;">
					<scroll-view scroll-y="true" style="height: 700rpx;margin-bottom: 40rpx;" @scrolltolower="onLoadProjectData">
						<view class="slot-content">
							<view :class="item.check ? 'address_check_box' : 'address_box'" v-for="item in projectData.list" :key="item.id" >
								<view @click="onChooseProject(item)">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
					<view class="u-flex">
						<view class="addBtn" @click="projectData.show = false">取消</view>
						<view class="bottomBtn" @click="onConfirmProject">确定</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		<!-- 确认弹出框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :modalContent="modal.content" :showCancel="modal.showCancel"
			@confirm="modalConfirm" @cancel="modal.show = false"></Modal>

		<view style="height: 150rpx;"></view>

		<Bottom :btnText="'确定'" @confirm="onAdvertAdd"></Bottom>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import DateTimePicker from '@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue'
	import env from '@/network/env.js'
	import { advertStandard, userAdvertAdd, userTogetherList } from '@/network/api.js'
	import { hasEmptyValue, formatDate } from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal,
			DateTimePicker
		},
		data() {
			return {
				advertList: [{
						id: 0,
						title: '推广内容',
						label: '',
						value: ''
					},
					{
						id: 2,
						title: '推广位置',
						label: '酒局列表',
						value: 1
					},
					{
						id:8,
						title: '推广名称',
						label: ''
					},
					{
						id: 3,
						title: '推广图片',
						label: '',
						value: ''
					},
					{
						id: 4,
						title: '推广开始时间',
						label: '',
						value: ''
					},
					{
						id: 5,
						title: '推广结束时间',
						label: '',
						value: ''
					},
					{
						id: 6,
						title: '投放地点',
						label: '',
						value: '',
						latitude: 0,
						longitude: 0
					},
					{
						id: 7,
						title: '投放范围',
						label: '不限',
						value: ''
					}
				],
				selectData: {
					show: false,
					currentId: 0,
					list: []
				},
				pointData: {
					num: '',
					list: []
				},
				remindInfo: '',
				projectData:{
					show:false,
					page: 1,
					count: 0,
					list: []
				},
				timeType: 0,// 4 开始时间 5 结束时间
				advRemindShow: false,
				placeholderStyle: "color: #999999FF;fontSize:24rpx",
				action: `${env.baseUrl}/api/uploadOssImage`,
				modal: {
					show: false,
					showCancel: true,
					confirm: '确定',
					content: ''
				},
				defaultTime: new Date().getTime(),
			}
		},
		onLoad() {
			this.onGetAdvertPost()
			this.onGetProject()
		},
		methods: {
			async onGetAdvertPost() {
				const res = await advertStandard()
				res.data.list.map(item=>item.check = false)
				this.pointData.list = res.data.list
				this.remindInfo = res.data.four_info
			},
			async onGetProject(){
				const params = {
					page: this.projectData.page,
					user_id: uni.getStorageSync("user_id"),
					limit: 10
				}
				const res = await userTogetherList(params)
				this.projectData.count = res.data.count
				res.data.list.map(item=>{
					item.check = false
					this.projectData.list.push(item)
				})
			},
			onChoose(id, type) {
				switch (id) {
					case 0:
						this.selectData.list = [{
							label: '名片推广',
							value: 1
						}, {
							label: '外部小程序',
							value: 3
						}]
						if(this.projectData.count > 0){
							this.selectData.list.push({label: '项目优选', value: 4})
						}
						this.selectData.currentId = id
						this.selectData.show = true
						break;
					case 2:
						this.selectData.list = [{
							label: '酒局列表',
							value: 1
						}]
						this.selectData.currentId = id
						this.selectData.show = true
						break;
					case 4:
					case 5:
					    this.timeType = id
						this.$refs.datetimePicker.open()
						break;
					case 6:
						let _this = this
						uni.chooseLocation({
							success(res) {
								_this.advertList.forEach(item => {
									if (item.id == id) {
										item.label = `${res.name}`
										item.latitude = res.latitude
										item.longitude = res.longitude
									}
								})
							}
						})
						break;
					case 7:
						this.selectData.list = [{
							label: '不限',
							value: ''
						}, {
							label: '1km',
							value: 1000
						}, {
							label: '10km',
							value: 10000
						}, {
							label: '100km',
							value: 100000
						}]
						this.selectData.currentId = id
						this.selectData.show = true
						break;
				}
			},
			onSelectConfirm(val) {
				this.advertList.forEach(item => {
					if (item.id == this.selectData.currentId) {
						item.value = val[0].value
						item.label = val[0].label
					}
				})
				/* 新增外部小程序字段 */
				if (val[0].value == 3 && this.selectData.currentId == 0 && !this.advertList.some(item => item.id == 1)) {
					const params = {
						id: 1,
						title: '跳转小程序链接',
						label: '',
						value: ''
					}
					this.advertList.splice(1, 0, params)
				}
				/* 移除外部小程序字段 */
				if ([1,4].includes(val[0].value) && this.selectData.currentId == 0 && this.advertList.some(item => item.id == 1)) {
					this.advertList.splice(this.advertList.findIndex(item=>item.id == 1), 1)
				}
				/* 新增项目字段 */
				if(val[0].value == 4 && this.selectData.currentId == 0 && !this.advertList.some(item=>item.id == 9)){
					const params = {
						id: 9,
						title: '选择项目',
						label: '',
						value: ''
					}
					this.advertList.splice(1, 0, params)
				}
				/* 移除项目字段 */
				if ([1,3].includes(val[0].value) && this.selectData.currentId == 0 && this.advertList.some(item => item.id == 9)) {
					this.advertList.splice(this.advertList.findIndex(item=>item.id == 9), 1)
				}
			},
			onTimeConfirm(val) {
				this.advertList.find(item=>item.id == this.timeType).label = `${formatDate(val.value / 1000,true)} 00:00:00`
			},
			onChoosePoint(val){
				this.pointData.list.map(item=>item.check = false)
				val.check = true
				this.pointData.num = val.key
			},
			onOpenProject(){
				this.projectData.show = true
			},
			onChooseProject(val){
				this.projectData.list.map(item=>item.check =false)
				val.check = true
			},
			onConfirmProject(){
				let checkObj = this.projectData.list.find(item=>item.check == true)
				this.advertList.map(item=>{
					if(item.id == 9){
						item.label = checkObj.title
						item.value = checkObj.id
					}
				})
				this.projectData.show = false
			},
			onLoadProjectData(){
				this.projectData.page++
				this.onGetProject()
			},
			onUploadImage(){
				const _this = this
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['camera','album'],
					success: function(res) {
						uni.showLoading({
							title: "上传中"
						})
						const tempFilePath = res.tempFilePaths[0]
						uni.uploadFile({
							url: `${_this.action}`,
							filePath: tempFilePath,
							name: 'file',
							success: (uploadRes) => {
								_this.advertList.find(item=>item.id == 3).value = JSON.parse(uploadRes.data).data.url
								uni.hideLoading()
							}
						});
					}
				})
			},
			onAdvertAdd(){
				const params = {
					user_id: uni.getStorageSync("user_id"),
					put_num: this.pointData.num
				}
				this.advertList.forEach(item=>{
					switch(item.id){
						case 0:
						    params.type = item.value
							break;
						case 1:
						    params.url = item.label
							break;
						case 3:
						    params.image = item.value
							break;
						case 4:
						    params.start_time = item.label
							break;
						case 5:
						    params.end_time = item.label
							break;
						case 6:
						    params.address_name = item.label
							params.longitude = item.longitude
							params.latitude = item.latitude
							break;
						case 8:
						    params.name = item.label
							break;
						case 9:
						    params.together_id = item.value
							break;
					}
				})
				if(hasEmptyValue(params)){
					params.range = this.advertList.find(item=>item.id == 7).value
					userAdvertAdd(params).then(res=>{
						this.modal.content = `${res.msg}`
						this.modal.confirm = '确定'
						this.modal.showCancel = false
						this.modal.show = true
					})
				}else{
					uni.showToast({
						title: "必填项不能为空",
						icon: "none"
					})
				}
			},
			modalConfirm(){
				this.modal.show = false
				uni.navigateBack({
					delta: 1,
					success() {
						uni.$emit('update', {
							msg: '页面更新'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload_box {
		width: 100rpx;
		height: 100rpx;
		justify-content: center;
		background: #fff;
		border-radius: 15rpx;
		border: 1rpx solid #ccc;
		display: flex;
	}

	.image_box {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.tag_yellow {
		border-radius: 10px 10px 10px 0px;
		background-color: #FFAA02FF;
		color: #fff;
	}
	
	.signUpMask{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		
		.address_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			background: #FAFAFA;
		}
		
		.address_check_box{
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			background: #fb6316;
			color:#fff;
		}
		
		.addBtn{
			flex:1;
			height: 80rpx;
			background: #fff;
			color: #000;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			margin-right: 40rpx;
			border: 1rpx solid #ccc;
		}
		
		.bottomBtn{
			flex:1;
			height: 80rpx;
			background: #fb6316;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
		}
	}

	::v-deep .u-field {
		padding: 20rpx 0 28rpx 0rpx !important;
	}

	::v-deep .u-label {
		font-size: 30rpx !important;
		font-weight: bold !important;
	}
</style>